<template>
  <el-tabs v-model="activeName" tab-position="left" @tab-click="handleChange">
    <el-tab-pane label="表单信息" name="form" label-width="100px">
      <FormIndex :form-key="instanceUrl" v-model="form" :viewer="true" />
    </el-tab-pane>
    <el-tab-pane label="任务处理" name="taskForm" label-width="100px">
      <el-card>
        <div slot="header">
          <span>任务信息</span>
        </div>
        <div>
          <el-row class="task-info-row">
            <el-col :span="8">任务名称：</el-col>
            <el-col :span="16">{{ taskInfo.taskName }}</el-col>
          </el-row>
          <el-row class="task-info-row">
            <el-col :span="8">流程发起人：</el-col>
            <el-col :span="16">{{ taskInfo.orderVariableMap ? taskInfo.orderVariableMap['operator.realName'] : '' }}</el-col>
          </el-row>
          <el-row class="task-info-row">
            <el-col :span="8">任务开始时间：</el-col>
            <el-col :span="16">{{ taskInfo.taskCreateTime }}</el-col>
          </el-row>
          <el-row class="task-info-row">
            <el-col :span="8">任务完成时间：</el-col>
            <el-col :span="16">{{ taskInfo.taskEndTime }}</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card style="margin-top: 12px;">
        <div slot="header">
          <span>意见信息</span>
        </div>
        <el-timeline>
          <el-timeline-item
            placement="top"
            v-for="(item) in hisTaskList"
            :key="item.id"
            :timestamp="item.taskEndTime">
            <el-card>
              <p>{{ item.taskVariableMap['operator.realName'] || item.orderVariableMap['operator.realName'] || '-' }}【{{ item.taskName }}】</p>
              <p>{{ item.taskVariableMap.approvalOpinion || '-' }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="流程图" name="diagram">
      <SnakerFlowDesigner class="m-snaker-flow-designer" :high-light="highLight" :viewer="true" v-model="flowData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { getXml } from '@/api/wf/wf.process.service.js'
import { highLightData } from '@/api/wf/wf.order.service.js'
import { get as getTask, listHisByOrderId } from '@/api/wf/wf.task.service.js'

import FormIndex from '@/views/modules/wf/form/index.vue'

export default {
  name: 'WfProcessDetails',
  components: {
    FormIndex
  },
  props: {
    id: {
      type: [String, Number, Object],
      default: undefined
    }
  },
  data() {
    return {
      xml: '',
      activeName: 'form',
      flowData: {},
      highLight: {},
      instanceUrl: 'leaveForm',
      form: {},
      taskInfo: {},
      hisTaskList: [],
      commonForm: {
        approvalType: undefined,
        approvalOpinion: ''
      }
    }
  },
  mounted() {
    this.instanceUrl = this.id.instanceUrl
    getTask({
      id: this.id.id
    }).then(res => {
      if (res.code === 0) {
        this.taskInfo = res.data
        this.commonForm = res.data.taskVariableMap
        Object.keys(res.data.orderVariableMap).filter(key => {
          return key.startsWith('f_')
        }).forEach(key => {
          this.$set(this.form, key, res.data.orderVariableMap[key])
        })
      }
    })
    getXml({
      id: this.id.processId
    }).then(res => {
      if (res.code === 0) {
        this.xml = res.data
        this.flowData = res.data
        highLightData({ id: this.id.orderId }).then(res => {
          this.highLight = res.data
        })
      }
    })
    listHisByOrderId({
      id: this.id.orderId
    }).then(res => {
      if (res.code === 0) {
        this.hisTaskList = res.data
      }
    })
  },
  methods: {
    resetFields() {
      this.xml = ''
      this.$emit('onEvent', 'tab-click', false)
    },
    handleChange(tab) {
      this.$emit('onEvent', 'tab-click', tab.paneName === 'taskForm')
    }
  }
}
</script>
<style scoped>
.m-snaker-flow-designer {
  height:440px
}
.m-snaker-flow-designer >>> #LF-view {
  width: 100%;
  height: 100%;
  margin-left: 0;
}
.task-info-row {
  line-height: 44px;
}
</style>
